<template>
  <div class="addAccount">
    <van-form @submit="onSubmit" input-align="right" error-message-align="right">
      <van-cell-group inset>
        <van-field v-model="ruleForm.name" name="姓名" label="姓名" placeholder="请输入姓名"
          :rules="[{ required: true, message: '请填写姓名' }]" />
        <van-field v-model="ruleForm.id" name="身份证" label="身份证" placeholder="请输入身份证"
          :rules="[{ required: true, message: '请填写身份证' }]" />
        <van-field v-model="ruleForm.email" name="邮箱" label="邮箱" placeholder="请输入邮箱"
          :rules="[{ required: true, message: '请填写邮箱' }]" />

      </van-cell-group>
      <div class="fixed-btn flex-align-center media" v-if="ruleForm.real">
        <van-button  type="primary" native-type="submit">
          提交申请
        </van-button>
      </div>
    </van-form>
  </div>
</template>
  
<script setup>
import { ref, onMounted } from "vue"
import { addReal,realInfo } from "@/config/api"
import { showToast, showLoadingToast } from "vant"
import router from "@/config/router"

const ruleForm = ref({
  id: '',
  name: '',
  email: '',
  real:true
})


onMounted(() => {
  realInfo({}).then((res) => {
    if(res){
      ruleForm.value=res;
      ruleForm.value.real=false
    }  
  })
})

const onSubmit = () => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
  });
  addReal(ruleForm.value).then(() => {
    showToast('实名成功')
    setTimeout(() => {
      router.go(-1)
    }, 1000);
  })
};
</script>
  
<style lang="less" scoped>
/deep/ .van-field__label {
  color: #666666;
}

/deep/ .van-cell {
  padding: 0.35rem 0.53rem;
}

.addAccount {
  min-height: 100vh;
  background: #f0f3f8;
  padding-top: 0.53rem;
}

.payQrcode_box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.27rem;
}

.payQrcode_box img {
  width: 4rem;
}

.fixed-btn {
  width: 100%;
  min-height: 2.67rem;
  background: #ffffff;
  box-shadow: 0px 0px 0.21rem 0px rgba(0, 0, 0, 0.1);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 0.27rem;
  margin: 0 auto;

  .van-button {
    width: 100%;
  }
}
</style>